<script setup lang="ts">
import { computed } from "vue"

import "@kangc/v-md-editor/lib/style/preview.css"
import "@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css"
import "@kangc/v-md-editor/lib/theme/style/vuepress.css"

import clipboard from "@/utils/clipboard"
import base from "../markdown/base.md?raw"
import talk from "../markdown/talk.md?raw"
import picture from "../markdown/picture.md?raw"
import tts from "../markdown/tts.md?raw"

import { useRoute } from "vue-router"

//markdown
import VMdPreview from "@kangc/v-md-editor/lib/preview"
import createCopyCodePlugin from "@kangc/v-md-editor/lib/plugins/copy-code/index"
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js"
import Prism from "prismjs"

VMdPreview.use(vuepressTheme, {
  Prism
})

VMdPreview.use(createCopyCodePlugin())

const route = useRoute()

const markdownType = {
  base,
  talk,
  picture,
  tts
}
type Type = keyof typeof markdownType

const activeMd = computed(() => {
  const active = (route.params.doc as Type) || "base"
  return markdownType[active]
})

const handleCopyCodeSuccess = (code: string) => {
  clipboard(code)
}
</script>

<template>
  <iframe v-if="route.params.doc === 'api'" class="api-container" src="/api.html"></iframe>
  <v-md-preview v-else class="md" :text="activeMd" @copy-code-success="handleCopyCodeSuccess"></v-md-preview>
</template>

<style lang="scss" scoped>
.api-container {
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
}

.md {
  ::v-deep .github-markdown-body {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
}
</style>
